<template>
    <div>
        <el-card shadow="never">
            <div slot="header">
                添加问卷
                <el-button type="primary" circle class="add" size='mini' @click="back">返回</el-button>
            </div>
            <el-form :model="addForm" status-icon label-position="right" :rules="rules" ref="addForm">
                <el-form-item label="标题：" label-width="70px" prop="title">
                    <el-input v-model="addForm.title" autocomplete="off" placeholder="请填写标题"></el-input>
                </el-form-item>
                <el-form-item label="班级：" label-width="70px" prop="class_id">
                    <el-select v-model="addForm.class_id" placeholder="请选择">
                        <el-option v-for="cls in classes" :key="'cls_'+cls.id" :label="cls.class_name+'班'" :value="cls.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选项：" label-width="70px" prop="item">
                    <el-select v-model="addForm.item" placeholder="请选择">
                        <el-option v-for="item in items" :key="'items_'+item.id" :label="item.item_name" :value="JSON.stringify(item.children)"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="大纲：" label-width="70px">
                    <el-button type="text" @click="dialogFormVisible=true">点击选择大纲</el-button>
                    <div v-if="addForm.content[0]">
                        已选择：
                        <el-tag v-for="val in addForm.content" :key="val.id">{{val.outline_name}}</el-tag>
                    </div>
                    <!--大纲弹出框-->
                    <el-dialog :visible="dialogFormVisible" width="50%" height="500px" :show-close="false" top="5vh">
                        <div slot="title">
                            <span style="color: #3c8dbc">- </span>选择大纲
                            <span style="color: #3c8dbc"> -</span>
                        </div>
                        <el-tree node-key="outlines.data.id" @check-change="checkChange" :render-after-expand="false" :show-checkbox='true' :data="outlines" accordion>
                            <div class="tree-details" slot-scope="{data}">
                                <el-row type="flex">
                                    <el-col style="flex: 1">
                                        <span style="font-size: 13px">
                                            <span style="color: #3c8dbc">【 </span>{{data.outline_name}}
                                            <span style="color: #3c8dbc"> 】</span>
                                        </span>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-tree>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="cancel" size="small">取 消</el-button>
                            <el-button type="primary" @click="submit" size="small">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-form-item>
                <el-button @click="back" size="small">取 消</el-button>
                <el-button type="primary" @click="add('addForm')" size="small">添 加</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addForm: {
                title: '',
                class_id: '',
                item: '',
                content: []
            },
            classes: [],
            items: [],
            outlines: [],
            dialogFormVisible: false,
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                class_id: [
                    { required: true, message: '请选择班级', trigger: 'blur' },
                ],
                item: [
                    { required: true, message: '请选择选项', trigger: 'blur' },
                ]
            },
        }
    },
    created() {
        this.getClasses();
        this.getItems();
        this.getOutlines();
    },
    methods: {
        //选像
        getOutlines() {
            this.axios.get('/outlines').then((ret) => {
                this.outlines = ret.data.data;
            })
        },
        //选像
        getItems() {
            this.axios.get('/items').then((ret) => {
                this.items = ret.data.data;
            })
        },
        //班级
        getClasses() {
            this.axios.get('/classes', {
                params: {
                    currentPage: 1,
                    pageSize: 9999,
                }
            }).then((ret) => {
                this.classes = ret.data.data.rows;
            })
        },
        checkChange(node, flag) {
            if (node.children.length == 0) {
                if (flag) {
                    this.addForm.content.push(node);
                } else {
                    let i = this.addForm.content.indexOf(node);
                    this.addForm.content.splice(i, 1);
                }
            }
        },
        add(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    if (this.addForm.content.length == 0) {
                        this.$message.error('至少选择一个大纲哦');
                    } else {
                        this.axios.post('/papers/add', {
                            title: this.addForm.title,
                            class_id: this.addForm.class_id,
                            item: this.addForm.item,
                            content: JSON.stringify(this.addForm.content),
                        }).then(() => {
                            this.$router.push({ name: 'papers' })
                        }).catch(() => { })
                    }
                } else {
                    this.$message.error('错了哦，请正确填写表单内容');
                }
            });
        },
        back() {
            this.$router.push({ name: 'papers' })
        },
        submit() {
            if (this.addForm.content.length == 0) {
                this.$message.error('至少选择一个大纲哦');
            } else {
                this.dialogFormVisible = false;
            }
        },
        cancel() {
            this.dialogFormVisible = false;
        },
    }
}
</script>

<style  lang="less">
.el-select {
    display: block;
}

.el-tree-node {
    .el-tree-node__content {
        height: 50px;
        line-height: 50px;
    }
}

.el-form-item__label {
    color: rgb(60, 141, 188);
}

.el-tag {
    margin-right: 10px;
}

.el-dialog__body {
    padding: 0 20px;
}
</style>
